<template>
	<!-- 企业加量包 -->
	<view>
		<myHead title="权益加量包" :right="false"></myHead>
		<view class="xuanzequanyi">
			<view class="xztitle">选择{{detailsObj.Title}}加量包
				<view class="zhiding" v-if="detailsObj.Title=='职位置顶'"><text>置顶1次时长为60分钟</text></view>
			</view>
		
			<view class="xztext">{{detailsObj.Introduction}}</view>
		
			<view class="danxuan">
				<view class="danxuanbox" v-for="(item,index) in detailsObj.planServicePackages" :key="index"
					@click="clickJia(item,index)" :class="{'danxuanbox1':activation==index}">
					<view class="box1">
						<text class="jici">{{item.Value}}</text>
						<text class="jicitext">{{item.Unit}}</text>
					</view>
					<view class="box2">{{item.Price}}元</view>
					<view class="imagebox">
						<view class="yuan">
							<u-icon name="checkbox-mark" color="#ffffff" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" id="myFooter">
			<view class="btn" @click="goPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	import myHead from "@/pages/component/baseHead.vue";
	export default {
		components: {
			myHead,
		},
		data(){
			return{
				type: null, //
				activation: 0,
				payId: null, //选择购买的项
				detailsObj:{},	
			}
		},
		onLoad(option) {
			this.type = Number(option.type)
		},
		onShow() {
			this.ResumeDedetails()
		},
		methods:{
			clickJia(item, index) {
				this.activation = index
				this.payId = item
			},
			ResumeDedetails() {
				const app = getApp();
				const userRole = app.globalData.userRole == 0 ? 2 : 1;
				this.$http.huirc.servitemsPackage({
					Type: userRole,
					FeatureType: this.type
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.detailsObj = res.Result
						this.detailsObj.planServicePackages = this.detailsObj.planServicePackages.map(item => {
							return {
								...item,
								OrderType: 2
							}
						})
					}
				})
			},
			// 立即支付
			goPay() {
				if (this.payId == null) {
					this.payId = this.detailsObj.planServicePackages[0]
				}
				console.log(this.payId);
				uni.navigateTo({
					url: "/pages/views/packageB/Publicdocuments/index?tcid=" + JSON.stringify(this.payId)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.xuanzequanyi {
		margin: 20rpx 30rpx;
		padding: 30rpx 28rpx 2rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		opacity: 1;
	
		.xztitle {
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			padding-bottom: 10rpx;
			display: flex;
	
			.zhiding {
				background: rgba(243, 83, 112, 0.17);
				border-radius: 6rpx;
				// opacity: 0.17;
				padding: 2rpx 10rpx;
				margin-left: 20rpx;
	
	
				font-size: 24rpx;
				font-weight: 400;
				color: #F35370;
				display: flex;
				justify-content: center;
				align-items: center;
	
	
	
			}
		}
	
		.xztext {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
		}
	
		.danxuan {
			margin-top: 30rpx;
	
	
			.danxuanbox {
				background: #EAF1FF;
				border-radius: 20rpx;
				opacity: 1;
				border: 4rpx solid rgba(211, 211, 211, 0.31);
				padding: 29rpx 50rpx;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
	
				.box1 {
					min-width: 35%;
	
					.jici {
						font-size: 64rpx;
						font-weight: 400;
						color: #060637;
					}
	
					.jicitext {
						font-size: 24rpx;
						font-weight: 400;
						color: #060637;
					}
				}
	
				.imagebox {
	
					.yuan {
						width: 44rpx;
						height: 44rpx;
						background: #FFFFFF;
						opacity: 1;
						border: 2rpx solid #949494;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
	
			.danxuanbox1 {
				background: #EAF1FF;
				border-radius: 20rpx;
				opacity: 1;
				border: 4rpx solid #3476FE;
				padding: 29rpx 50rpx;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
	
				.box1 {
					.jici {
						font-size: 64rpx;
						font-weight: 400;
						color: #060637;
					}
	
					.jicitext {
						font-size: 24rpx;
						font-weight: 400;
						color: #060637;
					}
				}
	
				.imagebox {
	
					.yuan {
						width: 44rpx;
						height: 44rpx;
						background: #3476fe;
						opacity: 1;
						border: 2rpx solid #3476fe;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
	
				}
			}
	
		}
	}
	
	
	.footer {
		background: #ffffff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 1rpx solid rgba(0, 0, 0, 0);
	
		position: fixed;
		bottom: 0;
		// width: 100vh;
		// height: 177rpx;
		padding: 25rpx 60rpx 71rpx;
	
		.btn {
			background: #3476FE;
			border-radius: 10rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 24rpx 255rpx;
		}
	}
	
</style>